<template>
  <div class="navbar">
    <div id="navbar">
      <div class="lww_header">
        <div class="header_wrap">
          <div class="header_logo">
            <a href="javascript:void(0);" class="lww_logo"></a>
          </div>

          <ul class="header_nav">
            <li
              :class="
                index == $store.state.Tabbar.index ? 'header_nav_active' : ''
              "
              name="index"
              v-for="(item, index) in tabBarList"
              :key="item.path"
              @click="navigate(item.path, index)"
            >
              <a>{{ item.title }}</a>
            </li>
            <!-- <li name="destination"><a @click="navigate">目的地</a></li>
            <li name="strategy">
              <a @click="navigate">旅游攻略</a> class="header_nav_active"
            </li>
            <li name="travel"><a @click="navigate">旅游日记</a></li>
            <li name="">
              <a href="javascript:void(0);"
                >去旅行<i class="icon_caret_down"></i
              ></a>
            </li>
            <li name="">
              <a href="javascript:void(0);"
                >社区<i class="icon_caret_down"></i
              ></a>  
            </li> -->
          </ul>

          <div class="header_search">
            <input type="text" />
            <a class="icon_search"></a>
          </div>
          <div class="login_info" style="display: none">
            <div class="head_user">
              <a href="javascript:void(0);">
                <img
                  src="../../assets/images/default.jpg"
                  id="login_user_headUrl"
                />
                <i class="icon_caret_down"></i>
              </a>
            </div>
            <div class="header_msg">消息<i class="icon_caret_down"></i></div>
            <div class="header_daka">
              <a href="javascript:void(0);">打卡</a>
            </div>
          </div>
          <div class="login-out">
            <a
              class="weibo-login"
              href="javascript:void(0);"
              title="微博登录"
              rel="nofollow"
            ></a>
            <a
              class="qq-login"
              href="javascript:void(0);"
              title="QQ登录"
              rel="nofollow"
            ></a>
            <a
              class="weixin-login"
              href="javascript:void(0);"
              title="微信登录"
              rel="nofollow"
            ></a>
            <a
              id="_j_showlogin"
              title="登录骡窝窝"
              rel="nofollow"
              @click="login"
              >登录{{ isLogin }}</a
            >
            <span class="split">|</span>
            <a title="注册帐号" rel="nofollow" @click="register">注册</a>
          </div>
        </div>
        <div class="shadow">12312312</div>
      </div>
    </div>
  </div>
</template>

<script>
import { isLogin } from "../../utils/isLogin";
import { ApiUser } from "../../fetch/api";
export default {
  data() {
    return {
      // 头部导航列表
      tabBarList: [
        { title: "首页", path: "/" },
        { title: "目的地", path: "/destination" },
        { title: "旅游攻略", path: "/tourismstrategy" },
        { title: "旅游日记", path: "/traveldiary" },
        { title: "去旅行", path: "go" },
        { title: "社区", path: "community" },
      ],
    };
  },

  async created() {
    console.log(isLogin());
    // 判断是否登录
    if (isLogin()) {
      this.getUser();
    }
  },

  methods: {
    // 跳转方法
    navigate(path, i) {
      this.$store.commit("Tabbar/changeIndex", i);
      if (path == "go" || path == "community") {
        return;
      }
      this.$router.push(path);
    },
    // 登录
    login() {
      this.$router.push("/login");
    },
    // 注册
    register() {
      this.$router.push("/register");
    },

    // 获取登录信息的方法
    async getUser() {
      let res = await ApiUser();
    },
  },
};
</script>

<style>
</style>